<template>
	<div class="layout-padding">
		<div class="layout-padding-auto">
			<div style="display: flex">
				<div style="width: 15vw; margin-right: 20px;background-color: #fff;padding: 10px;">
					<div class="seach">
						<el-button type="primary" @click="openAddDialog">新增</el-button>
						<el-input clearable placeholder="输入配电柜名称" v-model="name">
							<template #append>
								<el-button icon="Search" @click="searchRoom" />
							</template>
						</el-input>
					</div>
					<div style="padding-top: 8px; height: 85vh; overflow-y: auto">
						<div class="menu-room" :class="[activeIdx === item.id ? 'active' : '']" @click="activeRoom(item)" v-for="(item, idx) in roomList">
							<div>{{ item.switchRoomName }}</div>
							<div>
								<el-button text type="primary" @click.stop="openEditDialog(item)">编辑</el-button>
								<el-button text type="danger" @click.stop="delRoom(item)">删除</el-button>
							</div>
						</div>
					</div>
				</div>
				<div style="width: 70vw;height: 85vh;background-color: #fff;padding: 10px;">
					<avue-crud
						ref="crud"
						v-model="form"
						:page="page"
						:data="tableData"
						:table-loading="tableLoading"
						:option="tableOption"
						:beforeClose="beforeClose"
						@search-change="searchChange"
						@refresh-change="refreshChange"
						@size-change="sizeChange"
						@selection-change="selectionChange"
						@current-change="currentChange"
						@row-update="handleUpdate"
						@row-save="handleSave"
						@row-del="rowDel"
					>
						<template #devName-search="{ row, size }">
							<el-input clearable v-model="devNameSeach"></el-input>
						</template>
						<template #devCategories-form>
							<!-- <avue-select
								ref="select1"
								v-model="form.devCategories"
								:dic="szcxhOptions"
								:props="devProps"
								@change="zcxhSearch"
								placeholder="请选择 产品"
							></avue-select> -->
							<avue-select
								ref="select1"
								v-model="form.devCategories"
								filterable
								:dic="devList"
								:props="devProps"
								@change="zcxhSearch"
								placeholder="请选择 产品"
							></avue-select>
						</template>
						<template #devName-form>
							<avue-select ref="select" v-model="form.devName" :dic="equipmentList" filterable :props="devOptions" placeholder="请选择 设备名称"></avue-select>
						</template>
					</avue-crud>
				</div>
			</div>
			<el-dialog v-model="centerDialogVisible" :title="title" width="800" center>
				<div style="display: flex; justify-content: flex-start; align-items: center">
					<span>配电柜名称：</span>
					<el-input style="width: 240px" clearable v-model="switchRoomName"></el-input>
					<!-- <span style="margin-left: 20px">区域选择：</span>
					<el-select v-model="floorCode" style="width: 240px">
						<el-option v-for="item in floorList" :key="item.floorCode" :label="item.floorName" :value="item.floorCode"> </el-option>
					</el-select> -->
				</div>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="centerDialogVisible = false">取消</el-button>
						<el-button type="primary" @click="confirmRoom"> 确定 </el-button>
					</div>
				</template>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import { fetchList, addObj, delObj, putObj, fetchListRoom, addObjRoom, delObjRoom, putObjRoom } from '/@/api/powerdistribution/electricity/equipment';
import { getAllAssetsModel, getDevInfo, getzhuceProduct } from '/@/api/powerdistribution/electricity/equipmentRegister';

export default {
	name: 'index',
	components: {},
	data() {
		return {
			devObj: {},
			devNameSeach: '',
			// floorList: [
			// 	{ floorName: '-1F', floorCode: '0' },
			// 	{ floorName: '1F', floorCode: '1' },
			// 	{ floorName: '2F', floorCode: '2' },
			// 	{ floorName: '3F', floorCode: '3' },
			// 	{ floorName: '4F', floorCode: '4' },
			// ],
			// floorCode: '',
			roomObj: {},
			roomList: [],
			switchRoomName: '',
			activeIdx: 0,
			title: '新增配电柜',
			centerDialogVisible: false,
			name: '',
			form: {},
			tableData: [],
			searchForm: {},
			page: {
				total: 0, // 总数
				currentPage: 1, // 当前页数
				pageSize: 10, // 每页显示多少条
			},
			tableLoading: false, // 表格加载状态
			scarchOptions: [], // ------
			typeProps: {
				label: 'typeName',
				value: 'devType',
			},
			nameProps: {
				label: 'devName',
				value: 'unitNo',
			},
			tableOption: {
				index: true,
				emptyBtn: false,
				indexLabel: '序号',
				indexWidth: '60',
				border: true,
				stripe: true,
				menuWidth: 300,
				menuAlign: 'center',
				dialogDrag: true,
				align: 'center',
				labelWidth: '160',
				columnBtn: false,
				searchMenuSpan: 6,
				searchLabelWidth: 'auto',
				searchMenuPosition: 'left',
				searchEnter: true,
				defaultExpandAll: true,
				rowKey: 'id',
				rowParentKey: 'parentId',
				gridBtn: false, // 卡片模式切换按钮
				column: [
					{
						type: 'select',
						label: '型号',
						prop: 'devCategories',
						hide: true,
						editDisplay: false,
						rules: [
							{
								required: true,
								trigger: 'blur',
								message: '型号必填',
							},
						],
					},
					{
						type: 'select',
						label: '设备名称',
						search: true,
						prop: 'devName',
						editDisplay: false,
						overHidden: true,
						rules: [
							{
								required: true,
								message: '请输入设备名称',
								trigger: 'blur',
							},
						],
					},
					{
						type: 'textarea',
						label: '备注',
						prop: 'remark',
						span: 24,
					},
				],
			},
			selectList: [],
			szcxhOptions: [],
			devProps: {
				label: 'name',
				value: 'productKey',
			},
			devList: [],
			equipmentList: [],
			devOptions: {
				label: 'devName',
				value: 'unitNo',
			},
		};
	},
	computed: {
		// permissions() {
		// 	return {
		// 		devEnroll_view: getAuthBtnList('devEnroll_view'),
		// 		devEnroll_add: getAuthBtnList('devEnroll_add'),
		// 		devEnroll_edit: getAuthBtnList('devEnroll_edit'),
		// 		devEnroll_del: getAuthBtnList('devEnroll_del'),
		// 		devEnroll_import: getAuthBtnList('devEnroll_import'),
		// 	};
		// },
		permissionList() {
			return {
				viewBtn: getAuthBtnList('switchRoom_view'),
				addBtn: getAuthBtnList('switchRoom_add'),
				editBtn: getAuthBtnList('switchRoom_edit'),
				delBtn: getAuthBtnList('switchRoom_del'),
				// importBtn: getAuthBtnList('devEnroll_import'),
			};
		},
	},
	mounted() {
		this.fatchListRoom();
		// getAllAssetsModel({ typeCode: '002310120' }).then((res) => {
		// 	this.szcxhOptions = res.data.data;
		// });
	},
	methods: {
		fatchListRoom(name) {
			fetchListRoom(Object.assign({ current: 1, size: 999 }, { switchRoomName: name })).then((data) => {
				console.log(data, '获取接口数据');
				this.roomList = data.data.records;
				console.log(this.roomList, '左侧数据');
				this.activeIdx = data.data.records[0].id;
				this.getList(this.page);
			});
		},
		zcxhSearch(data) {
			let obj = {
				size: 999,
			};
			getDevInfo(obj).then((res) => {
				this.devList = res.data.records;
			});
			if (data.value === '' || data.value === undefined) {
				this.equipmentList = [];
			} else {
				if (this.form.id == undefined) {
					// console.log(data.value.join(','), 'wwwwww');
					let objData = {
						current: 1,
						size: 999,
						devType: data.value,
					};
					getzhuceProduct(objData).then((res1) => {
						this.equipmentList = res1.data.records;
					});
				} else {
					getzhuceProduct(objData).then((res1) => {
						this.equipmentList = res1.data.records;
					});
				}
			}
		},

		confirmRoom() {
			if (this.switchRoomName === '') return this.$message.error('请填写完整');
			if (this.title === '新增配电柜') {
				addObjRoom({
					switchRoomName: this.switchRoomName,
					// floorCode: this.floorCode,
				}).then((data) => {
					this.$message.success('新增成功');
					this.fatchListRoom();
				});
			} else {
				putObjRoom({
					...this.roomObj,
					switchRoomName: this.switchRoomName,
					// floorCode: this.floorCode,
				}).then((data) => {
					this.$message.success('编辑成功');
					this.fatchListRoom();
				});
			}
			this.centerDialogVisible = false;
		},
		searchRoom() {
			this.fatchListRoom(this.name);
		},
		activeRoom(val) {
			this.activeIdx = val.id;
			this.getList(this.page);
		},
		openAddDialog() {
			this.title = '新增配电柜';
			this.centerDialogVisible = true;
			this.switchRoomName = '';
			// this.floorCode = '';
		},
		openEditDialog(val) {
			this.title = '编辑配电柜';
			this.centerDialogVisible = true;
			this.switchRoomName = val.switchRoomName;
			// this.floorCode = val.floorCode;
			this.roomObj = val;
		},
		delRoom(val) {
			this.$confirm('是否确认删除该数据？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delObjRoom(val.id);
				})
				.then((data) => {
					this.$message.success('删除成功');
					this.fatchListRoom();
				})
				.catch((cancelorerror) => {});
		},
		selectionChange(list) {
			this.selectList = list;
		},
		addEquipment(val) {
			this.devObj = val;
			this.$refs.crud.rowAdd();
		},
		getList(page, arg) {
			this.tableLoading = true;
			fetchList(
				Object.assign(
					{
						current: page.currentPage,
						size: page.pageSize,
						roomId: Number(this.activeIdx),
					},
					arg
				)
			)
				.then((response) => {
					let { records, total } = response.data || {};
					this.tableData = records.map((item) => {
						item.children = item.dtoList ?? [];
						return { ...item };
					});
					this.page.total = total;
					// this.page.total = 1;
					this.tableLoading = false;
				})
				.catch(() => {
					this.tableLoading = false;
				});
		},
		// 删除
		rowDel: function (row, index) {
			this.$confirm('是否确认删除该数据？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(function () {
					return delObj(row.id);
				})
				.then((data) => {
					this.$message.success('删除成功');
					this.getList(this.page);
				})
				.catch((cancelorerror) => {});
		},
		//批量删除
		plDelete() {
			if (this.selectList.length > 0) {
				this.$confirm('是否确认删除已选择的数据', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				})
					.then(() => {
						let ids = [];
						this.selectList.forEach((data) => {
							ids.push(data.id);
						});
						return delAllObj(ids)
							.then((res) => {
								this.$message.success('删除成功');
								this.getList(this.page);
							})
							.catch(() => {
								this.$message.error('删除失败');
							});
					})
					.then((data) => {})
					.catch((cancelorerror) => {});
			}
		},
		beforeClose(done, type) {
			this.devObj = {};
			done();
		},
		// 修改更新数据
		handleUpdate: function (row, index, done, loading) {
			putObj(row)
				.then((data) => {
					this.$message.success('修改成功');
					done();
					this.getList(this.page);
				})
				.catch(() => {
					loading();
				});
		},
		// 新增数据
		handleSave: function (row, done, loading) {
			if (this.devObj.id) {
				row.parentId = Number(this.devObj.id);
			} else {
				row.roomId = Number(this.activeIdx);
			}
			let arrObj = {};
			this.equipmentList.forEach((item) => {
				if (item.unitNo == row.devName) {
					(arrObj.devName = item.devName), (arrObj.unitNo = item.unitNo), (arrObj.remark = row.remark), (arrObj.roomId = Number(this.activeIdx));
				}
			});
			addObj(arrObj)
				.then((data) => {
					this.$message.success('添加成功');
					done();
					this.parentId = 0;
					this.getList(this.page);
				})
				.catch(() => {
					loading();
				});
		},
		sizeChange(pageSize) {
			this.page.pageSize = pageSize;
			this.getList(this.page, { devName: this.devNameSeach });
		},
		currentChange(current) {
			this.page.currentPage = current;
			this.getList(this.page, { devName: this.devNameSeach });
		},
		searchChange(form, done) {
			this.page.currentPage = 1;
			this.getList(this.page, { devName: this.devNameSeach });
			done();
		},
		refreshChange() {
			this.getList(this.page);
		},
	},
};
</script>
<style lang="scss" scoped>
.seach {
	display: flex;
	justify-content: center;
	align-items: center;
}

.active {
	color: #3da3f4;
	background: #edf5ff;
}
.menu-room {
	font-size: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 5px;
	padding: 0 4px;
	transition: all 0.3s;
	cursor: pointer;
	user-select: none;
	margin-bottom: 3px;

	&:hover {
		background: #edf5ff;
	}
}
</style>
